<h2>基础代码</h2>
<p>页面加入以下基础代码</p>
<pre>&lt;div id="table" class="dux-table"&gt;
...内部组件
&lt;/div&gt;
&lt;script&gt;
    Do.ready('base', function () {
        $('#table').duxTable();
    });
&lt;/script&gt;
</pre>
<h2>头部组件</h2>
<p>用于表格搜索筛选，基础代码，包含了下拉判断，$pageMaps变量为页面参数</p>
<pre>
&lt;div class="table-head">
    &lt;form class="uk-form" method="post" action=""&gt;
        &lt;input type="text" class="input" name="keyword" size="20" value="" placeholder="文本框"&gt;
        &lt;select name=&quot;&quot;&gt;
            &lt;option value=&quot;0&quot;&gt;=下拉选择=&lt;/option&gt;
            &lt;?php if(!empty($selectList)) foreach($selectList as $vo){ ?&gt;
                &lt;?php if($pageMaps['id'] == $vo['id']){ ?&gt;
                    &lt;option value=&quot;&lt;?php echo $vo['id']; ?&gt;&quot; selected&gt;
                &lt;?php }else{ ?&gt;
                    &lt;option value=&quot;&lt;?php echo $vo['id']; ?&gt;&quot;&gt;
                &lt;?php } ?&gt;
                &lt;?php echo $vo['name']; ?&gt;&lt;/option&gt;
            &lt;?php } ?&gt;
            &lt;/select&gt;
        &lt;/select&gt;
        &lt;button class="uk-button" type="submit"&gt;筛选&lt;/button&gt;
    &lt;/form>
 &lt;/div>
</pre>
<h2>表格组件</h2>
<p>表格功能组件保护了全选，状态更改，删除、其他动作等ajax操作，$list变量为循环数组</p>
<pre>
&lt;table class=&quot;uk-table uk-table-hover uk-table-middle&quot;&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th width=&quot;80&quot;&gt;
                &lt;input type=&quot;checkbox&quot; class=&quot;js-select-all&quot;&gt;
            &lt;/th&gt;
            &lt;th width=&quot;*&quot;&gt;普通文本&lt;/th&gt;
            &lt;th width=&quot;*&quot; class=&quot;uk-text-center&quot;&gt;状态&lt;/th&gt;
            &lt;th width=&quot;*&quot; class=&quot;uk-text-center&quot;&gt;其他动作&lt;/th&gt;
            &lt;th width=&quot;100&quot;&gt;操作&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;?php if(!empty($list)) foreach($list as $vo){ ?&gt;
        &lt;tr&gt;
            &lt;td&gt;
                &lt;input type=&quot;checkbox&quot; class=&quot;js-select-all&quot;&gt;
            &lt;/td&gt;
            &lt;td&gt;文本&lt;/td&gt;
            &lt;td class=&quot;uk-text-center&quot;&gt;
                &lt;?php if($vo['status']){ ?&gt;
                    &lt;a href=&quot;javascript:;&quot; class=&quot;uk-icon-circle uk-text-success js-status&quot; data-url=&quot;&quot; data-id=&quot;&quot; data-status=&quot;1&quot; title=&quot;启用&quot;&gt;&lt;/a&gt;
                &lt;?php }else{ ?&gt;
                    &lt;a href=&quot;javascript:;&quot; class=&quot;uk-icon-circle uk-text-danger js-status&quot; data-url=&quot;&quot; data-id=&quot;&quot; data-status=&quot;0&quot; title=&quot;停用&quot;&gt;&lt;/a&gt;
                &lt;?php } ?&gt;
            &lt;/td&gt;    
                &lt;a href="<a target="_blank" href="javascript:;">javascript:;</a>" data-url="" data-data=""&gt;动作&lt;/a&gt; 
            &lt;/td&gt; 
            &lt;/td&gt;
            &lt;td class=&quot;uk-text-center&quot;&gt;
                &lt;a class=&quot;uk-button uk-button-primary uk-button-small uk-icon-pencil&quot; href=&quot;&quot; title=&quot;编辑&quot;&gt;&lt;/a&gt;
                &lt;a class=&quot;uk-button uk-button-danger uk-button-small uk-icon-trash js-del&quot; href=&quot;javascript:;&quot; data-url=&quot;&quot; data-data=&quot;&quot; title=&quot;删除&quot;&gt;&lt;/a&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;?php } ?&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</pre>
<h2>底部组件</h2>
<p>用于表格批量操作与列表分页</p>
<pre>
&lt;div class=&quot;table-foot uk-clearfix&quot;&gt;
    &lt;div class=&quot;uk-float-left js-menu&quot;&gt;
        &lt;a class=&quot;uk-button uk-button-danger uk-button-small&quot; href=&quot;javascript:;&quot; data-url=&quot;&quot; data-type=&quot;1&quot;&gt;删除&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class=&quot;uk-float-right&quot;&gt;&lt;?php echo $page; ?&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>
<script>
    Do.ready('pre', function () {
        $("pre").addClass("prettyprint");
        prettyPrint();
    });
</script>